<template>
  <!-- 厂商商品选购页 -->
  <div class="manufacturer-shopping">
    <div class="manufacturer-shopping-wrapper">

      <div class="manufacturer-shopping-header">
        <div class="manufacturer-shopping-title" id="manufacturer-shopping-title">
          {{parts_infoObj.consultantName}}
        </div>
      </div>

      <div class="manufacturer-shopping-main">
        <comCarInfoWrapper v-if="vinCode" :vin="vinCode" :selectorQueryEle="selectorQueryEle"></comCarInfoWrapper>
        <consultantPolicy ref="consultantPolicyRef"></consultantPolicy>

        <div v-if="parts_infoObj.friendAuditStatus == 10" class="manufacturer-shopping-table">
          <div class="manufacturer-shopping-thead">
            <div class="thead-item one">
              商品信息
            </div>
            <div class="thead-item two">
              单价
            </div>
            <div class="thead-item three">
              选购
            </div>
          </div>
          <div class="manufacturer-shopping-tbody" v-if="parts_group.length > 0">
            <div class="tbody-list-first" v-for="(item, index) in parts_group" :key="index" :style="{'padding': item.needAutoParam ? '0 .24rem 0' : '0 .38rem 0'}">
              <div class="needAutoParam-type-view" v-if="item.needAutoParam">
                <div class="shopping-header">
                  <div class="needAutoParam-shopping-name">
                    {{item.groupName}}
                  </div>
                  <div class="dosage-hint" v-if="item.hint_closed" @click="on_dosagehint_close(item)">
                    <img class="hint-icon" src="../assets/images/dosage-hint.png" alt="">
                    <div class="dosage-hint-text-box">
                      有多种规格
                      <span class="dosage-hint-sigh">！！！</span>
                      请勾选
                    </div>
                    <img class="close-icon" src="../assets/images/dosage-close.png" alt="">
                  </div>
                </div>
                <div class="tbody-list-second" v-for="(dosagesItem, dosagesIndex) in item.dosages" :key="dosagesIndex">
                  <div class="dosageDesc">
                    {{dosagesItem.dosageDesc}}
                  </div>
                  <div class="tbody-list-third" v-for="(partItem, partIndex) in dosagesItem.partItems" :key="partIndex">
                    <div v-if="partItem.partItemKind === 0" class="hasAdaptationShop">
                      <div class="tbody-item one">
                        <div class="shopping-info">
                          <div class="brandName" v-if="partItem.brandName">
                            {{partItem.brandName}}
                          </div>
                          <div class="partItemName" v-if="partItem.displayPartsNo" @click.stop="handleClickPartItemDetail(partItem)">
                            {{partItem.displayPartsNo}}
                          </div>
                          <div class="seriesName" v-if="partItem.seriesName">
                            {{partItem.seriesName}}
                          </div>
                        </div>
                        <div class="shoppingTradeName" v-if="partItem.otherCodes">
                          {{partItem.otherCodes}}
                        </div>
                      </div>
                      <template v-if="consultantType == 2">
                        <div v-if="partItem.price == 0" class="tbody-item two">
                          失效
                        </div>
                        <div v-else class="tbody-item two">
                          ¥{{partItem.price_text}}
                        </div>
                      </template>
                      <template v-else>
                        <div v-if="partItem.stockCount > 0 && partItem.price > 0" class="tbody-item two">
                          ¥{{partItem.price_text}}
                        </div>
                        <div v-else class="tbody-item two">
                        </div>
                      </template>
                      <div class="tbody-item three">
                        <template v-if="consultantType == 2">
                          <div class="operate" v-if="partItem.count > 0">
                            <img @click.stop="minusCount(partItem)" src="../assets/images/minus.png" alt="">
                            <div class="operate-num">
                              {{partItem.count}}
                            </div>
                            <img @click.stop="plusCount(partItem)" src="../assets/images/plus.png" alt="">
                          </div>
                          <div class="operate" v-else style="justify-content: flex-end;">
                            <img @click.stop="plusCount(partItem)" src="../assets/images/plus.png" alt="">
                          </div>
                        </template>
                        <template v-if="consultantType == 1">
                          <template v-if="partItem.stockCount > 0 && partItem.price > 0">
                            <div class="operate" v-if="partItem.count > 0">
                              <img @click.stop="minusCount(partItem)" src="../assets/images/minus.png" alt="">
                              <div class="operate-num">
                                {{partItem.count}}
                              </div>
                              <img @click.stop="plusCount(partItem)" src="../assets/images/plus.png" alt="">
                            </div>
                            <div class="operate" v-else style="justify-content: flex-end;">
                              <img @click.stop="plusCount(partItem)" src="../assets/images/plus.png" alt="">
                            </div>
                            <div class="stock-info">
                              (库存:
                              <span class="num">{{partItem.stockCount}}</span>)
                            </div>
                          </template>
                          <template v-else>
                            <div class="contactSupplier" style="justify-content: flex-end;">
                              请联系当地供应商
                            </div>
                          </template>
                        </template>

                        <!-- <div class="operate" v-if="partItem.count > 0">
                          <img @click.stop="minusCount(partItem)" src="../assets/images/minus.png" alt="">
                          <div class="operate-num">
                            {{partItem.count}}
                          </div>
                          <img @click.stop="plusCount(partItem)" src="../assets/images/plus.png" alt="">
                        </div>
                        <div class="operate" v-else style="justify-content: flex-end;">
                          <img @click.stop="plusCount(partItem)" src="../assets/images/plus.png" alt="">
                        </div>
                        <div class="stock-info" v-if="consultantType == 1">
                          (库存:
                          <span class="num">{{partItem.stockCount}}</span>)
                        </div> -->
                      </div>
                    </div>
                    <div v-if="partItem.partItemKind === 5" class="noAdaptationShop">
                      {{partItem.displayPartsNo}}
                    </div>
                  </div>
                </div>
              </div>
              <div class="noNeedAutoParam-type-view" v-else>
                <div class="shopping-name">
                  {{item.groupName}}
                </div>
                <div v-for="(dosagesItem, dosagesIndex) in item.dosages" :key="dosagesIndex">
                  <div class="tbody-list-third" v-for="(partItem, partIndex) in dosagesItem.partItems" :key="partIndex">
                    <div v-if="partItem.partItemKind === 0" class="hasAdaptationShop">
                      <div class="tbody-item one">
                        <div class="shopping-info">
                          <div class="brandName" v-if="partItem.brandName">
                            {{partItem.brandName}}
                          </div>
                          <div class="partItemName" v-if="partItem.displayPartsNo" @click.stop="handleClickPartItemDetail(partItem)">
                            {{partItem.displayPartsNo}}
                          </div>
                          <div class="seriesName" v-if="partItem.seriesName">
                            {{partItem.seriesName}}
                          </div>
                        </div>
                        <div class="shoppingTradeName" v-if="partItem.otherCodes">
                          {{partItem.otherCodes}}
                        </div>
                      </div>
                      <template v-if="consultantType == 2">
                        <div v-if="partItem.price == 0" class="tbody-item two">
                          失效
                        </div>
                        <div v-else class="tbody-item two">
                          ¥{{partItem.price_text}}
                        </div>
                      </template>
                      <template v-else>
                        <div v-if="partItem.stockCount > 0 && partItem.price > 0" class="tbody-item two">
                          ¥{{partItem.price_text}}
                        </div>
                        <div v-else class="tbody-item two">
                        </div>
                      </template>
                      <div class="tbody-item three">
                        <template v-if="consultantType == 2">
                          <div class="operate" v-if="partItem.count > 0">
                            <img @click.stop="minusCount(partItem)" src="../assets/images/minus.png" alt="">
                            <div class="operate-num">
                              {{partItem.count}}
                            </div>
                            <img @click.stop="plusCount(partItem)" src="../assets/images/plus.png" alt="">
                          </div>
                          <div class="operate" v-else style="justify-content: flex-end;">
                            <img @click.stop="plusCount(partItem)" src="../assets/images/plus.png" alt="">
                          </div>
                        </template>
                        <template v-if="consultantType == 1">
                          <template v-if="partItem.stockCount > 0 && partItem.price > 0">
                            <div class="operate" v-if="partItem.count > 0">
                              <img @click.stop="minusCount(partItem)" src="../assets/images/minus.png" alt="">
                              <div class="operate-num">
                                {{partItem.count}}
                              </div>
                              <img @click.stop="plusCount(partItem)" src="../assets/images/plus.png" alt="">
                            </div>
                            <div class="operate" v-else style="justify-content: flex-end;">
                              <img @click.stop="plusCount(partItem)" src="../assets/images/plus.png" alt="">
                            </div>
                            <div class="stock-info">
                              (库存:
                              <span class="num">{{partItem.stockCount}}</span>)
                            </div>
                          </template>
                          <template v-else>
                            <div class="contactSupplier" style="justify-content: flex-end;">
                              请联系当地供应商
                            </div>
                          </template>
                        </template>
                      </div>
                    </div>
                    <div v-if="partItem.partItemKind === 5" class="noAdaptationShop">
                      {{partItem.displayPartsNo}}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- <div v-else-if="parts_infoObj.friendAuditStatus == 0" class="noFriendApproved-view">
          <img class="noFriendApproved-image" src="../assets/images/noFriendApproved.png" alt="">
          <div class="noFriendApproved-text">仅对授权客户开放</div>
        </div> -->

        <div class="apply-view" v-else-if="parts_infoObj.friendAuditStatus == 5">
          <img class="noFriendApproved-image" src="../assets/images/cauthImg.png" alt="">
          <div class="noFriendApproved-text">您已提交申请</div>
        </div>

        <div v-else class="noFriendApproved-view">
          <img class="noFriendApproved-image" src="../assets/images/noFriendApproved.png" alt="">
          <button class="seePriceBtn" @click="seePriceFn">我要看价格</button>
          <div class="noFriendApproved-text">请留下您的手机号码</div>
        </div>

      </div>

      <div class="manufacturer-shopping-footer" v-if="parts_infoObj.friendAuditStatus == 10">
        <div class="cart-info">
          <div class="price">
            合计：
            <span class="fuhao">¥</span>
            <span class="jine">{{curShopTotalPrice}}</span>
          </div>
          <div class="shopNum">
            共{{curShopTotalCount}}件商品
          </div>
        </div>
        <div class="cart-addBtn lusir-common_cursor" @click="appendConsultantShopppingCart">
          加入清单
        </div>
        <div v-if="paymentMethod == 1" class="pay-addBtn1 lusir-common_cursor" @click="submitConsultantShopOrder">
          立即支付
          <span v-if="DiscountSwitch && curShopTotalCount > 0" class="discountPrice">
            <i class="label">折后¥</i>
            <i class="price">{{DisCountPrice}}</i>
          </span>
        </div>
        <div v-else class="pay-addBtn2 lusir-common_cursor" @click="submitConsultantShopOrder">
          好，送过来
        </div>
      </div>

    </div>

    <lusirMessageBox :title="greaterThanStockUpperLimitTitle" :visible="isShowGreaterThanStockUpperLimitDialog" @confirm="handleConfirmDialog" @cancel="handleCloseDialog">
    </lusirMessageBox>

    <lusirMessageBox :title="'请使用微信扫码支付'" :headerBorderBottom="true" :headerPaddingVertical="20" :type="'alert'" :visible="isShowQrCodeUrlDialog" @confirm="isShowQrCodeUrlDialog = false" @cancel="isShowQrCodeUrlDialog = false">
      <div class="qrCode-main">
        <img class="qrCodeImage" :src="qrCodeUrl" alt="">
        <div class="invalid-view" v-if="isInvalidShow">
          <span class="text">二维码已失效</span>
        </div>
      </div>
    </lusirMessageBox>

  </div>
</template>

<script>
import comCarInfoWrapper from "@/components/com-carInfo-wrapper";
import lusirMessageBox from "@/components/lusir-MessageBox";
import consultantPolicy from "@/components/consultantPolicy";

import { mapState, mapGetters } from "vuex";
export default {
  data() {
    return {
      param_cd: this.$com_util.getQueryString("cd") || 'CR2020111500323',
      vinCode: "",
      greaterThanStockUpperLimitTitle: "",
      isShowGreaterThanStockUpperLimitDialog: false, // 是否展示库存大于上限弹层
      parts_group: [], // 商品列表
      parts_infoObj: {}, // 商品的大集合
      propsData: {}, // 上个页面传过来的集合
      selectorQueryEle: [], // 当前需要知道宽高的元素的id集合
      shopOrderId: "", // 订单号
      paymentMethod: 0, // 结算方式 1是现结 3是月结
      consultantType: 0, // 厂商客服1 经销商客服2

      consultantPolicyObj: {
        freightPolicy: '',
        timePolicy: '',
      }, // 配送政策大集合
      isShowFreightPolicyBox: false,
      isShowTimePolicyBox: false,
      freightPolicyOpen: true, // 配送费用是否需要展开
      isShowFreightPolicyOpen: false, // 配送费用是否需要展开
      timePolicyOpen: true, // 配送费用是否展示
      isShowTimePolicyOpen: false, // 配送费用是否需要展开
      qrBaseUrl: "http://www.zhipeicloud.com/Common/QRCode?data=", // 二维码的前缀地址
      qrCodeUrl: "", // 二维码地址
      isShowQrCodeUrlDialog: false, // 是否展示帮助支付成功的弹层
      queryPayStatus: null, // 查询支付状态的定时器
      invalidSetTimeOutStatus: null,
      isInvalidShow: false, // 是否展示过期弹层

      DiscountSwitch: false,
      DiscountRate: '',
    };
  },
  computed: {
    // 合计商品数
    curShopTotalCount() {
      let totalCount = 0;
      this.parts_group.forEach(item => {
        item.dosages.forEach(dosagesItem => {
          totalCount += dosagesItem.partItems.reduce((prev, cur) => {
            return prev + cur.count;
          }, 0);
        });
      });
      return totalCount;
    },
    // 合计总价格
    curShopTotalPrice() {
      let totalPrice = 0;
      this.parts_group.forEach(item => {
        item.dosages.forEach(dosagesItem => {
          totalPrice += dosagesItem.partItems.reduce((prev, cur) => {
            return prev + cur.count * cur.price;
          }, 0);
        });
      });
      return totalPrice.toFixed(2);
    },
    DisCountPrice() {
      return (this.curShopTotalPrice * this.DiscountRate).toFixed(2);
    },
    ...mapGetters([
      "cangpei_param_gcd",
      "cangpei_param_ccd",
      "cangpei_param_ucd",
    ])
  },
  created() {
    this.getConsultantReply(); // 取得客服答复内容
    this.GetConsultantInfo(); // 取得客服信息
    this.selectorQueryEle = ["manufacturer-shopping-title"];
  },
  methods: {
    seePriceFn() {
      this.$wx.toast("请在小程序中申请开通");
    },
    // 取得客服信息
    async GetConsultantInfo() {
      const res = await this.$imServive({
        url: "/IMConsultant/GetConsultant",
        data: {
          imConsultantCode: this.cangpei_param_ccd,
        }
      });
      this.consultantType = res.consultantType;
    },
    // 厂商机器人客服订单支付结果
    async consultantOrderPayResult(requestObj) {
      const res = await this.$imServive({
        url: "/IMConsultant/ConsultantOrderPayResult",
        data: {
          imConsultantCode: this.cangpei_param_ccd,
          shopOrderId: requestObj.shopOrderId,
          payResult: requestObj.payResult,
          mode: 'by_reply', // 由购物车提交订单by_shoppingcart 客服答复内直接提交订单 by_reply
        }
      });
    },
    // 立即支付
    async submitConsultantShopOrder() {
      let _this = this;
      this.isInvalidShow = false;

      let request_details = this.getRequestParams();

      try {
        const res = await this.$imServive({
          url: "/IMConsultant/SubmitConsultantShopOrder",
          data: {
            imConsultantCode: this.cangpei_param_ccd,
            details: request_details,
            isShowLoading: true,
            mode: 'by_reply', // 由购物车提交订单by_shoppingcart 客服答复内直接提交订单 by_reply
          }
        });

        _this.shopOrderId = res.shopOrderId;

        //  command： 去支付的指令 gopay去支付 none无需后续动作
        if (res.command == 'gopay') {
          _this.qrCodeUrl = _this.qrBaseUrl + res.payTicket;
          _this.isShowQrCodeUrlDialog = true;
          _this.goRequestPaymentFn(res.payTaskId)
        } else {
          setTimeout(() => {
            _this.$router.push({
              path: `/consultantOrderDetail`,
              query: {
                id: _this.shopOrderId,
              },
            });
          }, 1000);
        }
      } catch (error) {
        console.log('我错了', error);
      }
    },
    // 去微信支付
    goRequestPaymentFn(payTaskId) {
      clearInterval(this.queryPayStatus);

      clearTimeout(this.invalidSetTimeOutStatus)
      this.invalidSetTimeOutStatus = setTimeout(() => {
        this.isInvalidShow = true;
      }, 180000); // 180000

      let _this = this;

      this.queryPayStatus = setInterval(async () => {
        const res = await this.$imServive({
          url: "/IMConsultant/GetConsultantOrderPaymentStatus",
          data: {
            key: payTaskId
          }
        });

        if (res.status == 'success') {
          _this.handlePayStatus(res);
        }
      }, 1000);
    },
    // 支付后的状态
    handlePayStatus(result) {
      clearInterval(this.queryPayStatus);

      if (result.status == "failed") {
        this.qrCodeUrl = "";
        this.isShowQrCodeUrlDialog = false;
        this.reason = res.reason;
      } else if (result.status == "success") {
        this.qrCodeUrl = "";
        this.isShowQrCodeUrlDialog = false;
        this.$wx.toast.success("支付成功");
        setTimeout(() => {
          this.$router.push({
            path: `/consultantOrderDetail`,
            query: {
              id: this.shopOrderId,
            },
          });
        }, 1500);
      } else {
      }
    },
    //取得客服答复内容
    async getConsultantReply() {
      const res = await this.$imServive({
        url: "/IMConsultant/GetConsultantReply",
        data: {
          consultantReplyCode: this.param_cd
        },
        isShowLoading: true,
      });
      this.parts_group = res.parts_group;
      this.parts_infoObj = res;
      this.paymentMethod = res.paymentMethod;

      this.DiscountSwitch = res.discountSwitch;
      this.DiscountRate = res.discountRate;

      if (this.parts_infoObj.replyMode == 1) {
        this.vinCode = this.parts_infoObj.replyKey;
      } else {
        this.vinCode = "";
      }
      //配送政策
      // this.actionConsultantPolicy(res.freightPolicy, res.timePolicy)
      setTimeout(() => {
        this.$refs.consultantPolicyRef.actionConsultantPolicy(res)
      }, 500);
    },
    // 报价详情
    handleClickPartItemDetail(item) {
      let partItemDetailDialog_initMode = "partItemInfo";
      let partItemDetailDialog_input = {
        partItemId: item.partItemId
      };
      let requestData = {
        partItemDetailDialog_initMode,
        partItemDetailDialog_input
      };
      this.$router.push({
        name: "partItemDetail",
        params: {
          requestData: JSON.stringify(requestData),
        },
      });
    },
    // 得到请求时需要的参数
    getRequestParams() {
      let request_details = [];
      this.parts_group.forEach(item => {
        item.dosages.forEach(dosagesItem => {
          dosagesItem.partItems.forEach(partItem => {
            if (partItem.count > 0) {
              request_details.push({
                rbdId: partItem.rbdId,
                count: partItem.count
              });
            }
          });
        });
      });
      return request_details;
    },
    // 加入清单
    async appendConsultantShopppingCart() {
      let request_details = this.getRequestParams();

      let requestObj = {
        imConsultantCode: this.cangpei_param_ccd,
        details: request_details
      };


      try {
        const res = await this.$imServive({
          url: "/IMConsultant/AppendConsultantShopppingCart",
          isShowLoading: true,
          data: requestObj
        });
        //临时上下文
        this.$store.commit("set_temp_context", "chat_scrollbottom");

        // wx.navigateBack({ delta: 1 });

      } catch (error) {
      }
    },
    handleConfirmDialog() {
      this.isShowGreaterThanStockUpperLimitDialog = false;
    },
    handleCloseDialog() {
      this.isShowGreaterThanStockUpperLimitDialog = false;
    },
    // 加数量
    plusCount(partItem) {
      // 经销商客服可以超卖 不用管剩余库存, 随便点, 厂商的不行
      if (partItem.count >= partItem.stockCount && this.consultantType == 1) {
        partItem.count = partItem.stockCount;
        this.greaterThanStockUpperLimitTitle =
          partItem.displayPartsNo + " 库存不足，无法加入清单 请调整选购数量";
        this.isShowGreaterThanStockUpperLimitDialog = true;
        return;
      }
      partItem.count = partItem.count + 1;
    },
    // 减数量
    minusCount(partItem) {
      partItem.count = partItem.count - 1;
    },
    // 关闭规格提示弹层
    on_dosagehint_close(item) {
      item.hint_closed = true;
    }
  },
  components: {
    comCarInfoWrapper,
    lusirMessageBox,
    consultantPolicy
  }
};
</script>

<style scoped>
.manufacturer-shopping-wrapper {
  position: relative;
  height: calc(100vh - 1.6rem);
  overflow-x: hidden;
  overflow-y: auto;
}
.manufacturer-shopping-wrapper .manufacturer-shopping-header {
  padding: 0 0.4rem;
  background-image: url("https://c1.zhipeicloud.com/cangpei_mini/images/pic_topBG.png");
  background-size: 100vw 2.4rem;
  background-position: center center;
  box-sizing: border-box;
  width: 100vw;
  height: 2.4rem;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-header
  .manufacturer-shopping-title {
  height: 1.12rem;
  width: 100%;
  font-weight: 500;
  color: #181818;
  display: flex;
  align-items: center;
}
.manufacturer-shopping-wrapper .manufacturer-shopping-main {
  background-color: #ecedee;
  border-radius: 0.32rem 0.32rem 0rem 0rem;
  position: absolute;
  top: 1.12rem;
  left: 0;
  width: 100vw;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .noFriendApproved-view {
  display: flex;
  justify-content: center;
  margin-top: 3.16rem;
  flex-direction: column;
  align-items: center;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .noFriendApproved-view
  .noFriendApproved-image {
  width: 2.64rem;
  height: 2rem;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .noFriendApproved-view
  .noFriendApproved-text {
  font-size: 0.4266666666666667rem;
  color: #c9cccf;
  margin-top: 0.44rem;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-table {
  background-color: #fff;
  box-shadow: 0rem 0.013333333333333334rem 0rem 0rem #cbd4e1,
    0rem -0.013333333333333334rem 0rem 0rem #cbd4e1;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-table
  .manufacturer-shopping-thead {
  border-bottom: 0.013333333333333334rem solid #f2f2f2;
  display: flex;
  align-items: center;
  padding: 0 0.38666666666666666rem;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-table
  .manufacturer-shopping-thead
  .thead-item {
  box-sizing: border-box;
  padding: 0.25333333333333335rem 0 0.26666666666666666rem;
  color: #999;
  font-size: 0.32rem;
  display: flex;
  align-items: center;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-table
  .manufacturer-shopping-thead
  .one {
  flex: 1;
  box-sizing: border-box;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-table
  .manufacturer-shopping-thead
  .two {
  width: 1.4666666666666666rem;
  justify-content: center;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-table
  .manufacturer-shopping-thead
  .three {
  width: 2.4rem;
  justify-content: center;
}

.contactSupplier {
  font-size: .4rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  color: #e74c3c;;
  white-space: nowrap;
}

.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody {
  overflow-x: hidden;
  overflow-y: auto;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .tbody-list-first {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .noNeedAutoParam-type-view {
  border-top: 0.013333333333333334rem solid #f2f2f2;
  padding: 0.32rem 0 0.30666666666666664rem;
  box-sizing: border-box;
  width: 100%;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .noNeedAutoParam-type-view
  .tbody-list-second {
  display: flex;
  border-top: 0.013333333333333334rem solid #f2f2f2;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0 0.06666666666666667rem;
  background: rgba(255, 255, 255, 0.78);
  border: 0.013333333333333334rem solid #70a0ff;
  border-radius: 0.16rem;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .noNeedAutoParam-type-view
  .tbody-list-second
  .dosageDesc {
  display: flex;
  align-items: center;
  height: 0.96rem;
  padding: 0 0.06666666666666667rem;
  box-sizing: border-box;
  font-size: 0.32rem;
  font-weight: 500;
  color: #f70609;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .noNeedAutoParam-type-view
  .tbody-list-third {
  width: 100%;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .noNeedAutoParam-type-view
  .hasAdaptationShop {
  display: flex;
  align-items: flex-start;
  background: #fff;
  border-radius: 0.13333333333333333rem;
  width: 100%;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .noNeedAutoParam-type-view
  .noAdaptationShop {
  width: 100%;
  padding: 0.2rem 0;
  font-size: 0.4rem;
  color: #d55f5a;
  background-color: #fff;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .noNeedAutoParam-type-view
  .tbody-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding-top: 0.18666666666666668rem;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .noNeedAutoParam-type-view
  .one {
  flex: 1;
  align-items: flex-start;
  box-sizing: border-box;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .noNeedAutoParam-type-view
  .one
  .shopping-info {
  line-height: 0.64rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .noNeedAutoParam-type-view
  .one
  .shopping-info
  .brandName {
  color: #5b5b5b;
  font-size: 0.36rem;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .noNeedAutoParam-type-view
  .one
  .shopping-info
  .partItemName {
  margin-left: 0.16rem;
  font-size: 0.36rem;
  color: #377de8;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .noNeedAutoParam-type-view
  .one
  .shopping-info
  .seriesName {
  font-size: 0.28rem;
  line-height: 0.4rem;
  background: #fab220;
  margin-left: 0.16rem;
  padding: 0.02666666666666667rem 0.13333333333333333rem;
  border-radius: 0.16rem 0.04rem;
  color: #fff;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .noNeedAutoParam-type-view
  .one
  .shoppingTradeName {
  font-size: 0.32rem;
  color: #ff9000;
  line-height: 0.56rem;
  margin-top: 0.05333333333333334rem;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .noNeedAutoParam-type-view
  .two {
  width: 1.4666666666666666rem;
  height: 0.64rem;
  align-items: center;
  color: #e74c3c;
  font-size: 0.4rem;
  box-sizing: content-box;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .noNeedAutoParam-type-view
  .three {
  width: 2.4rem;
  align-items: flex-end;
  padding-left: 0.26666666666666666rem;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .noNeedAutoParam-type-view
  .three
  .operate {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .noNeedAutoParam-type-view
  .three
  .operate
  .operate-num {
  flex: 1;
  word-break: break-all;
  text-align: center;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .noNeedAutoParam-type-view
  .three
  img {
  min-width: 0.64rem;
  max-width: 0.64rem;
  max-height: 0.64rem;
  min-height: 0.64rem;
  width: 0.64rem;
  height: 0.64rem;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .noNeedAutoParam-type-view
  .three
  .stock-info {
  font-size: 0.32rem;
  color: #8e8e8e;
  line-height: 0.56rem;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .noNeedAutoParam-type-view
  .three
  .stock-info
  .num {
  font-size: 0.4rem;
  font-weight: 550;
  color: #f34827;
  line-height: 0.56rem;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .tbody-list-first:first-child
  .noNeedAutoParam-type-view {
  border-top: none;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .needAutoParam-type-view {
  background: #c4d8ff;
  border-radius: 0.18666666666666668rem;
  padding: 0 0.10666666666666667rem 0.10666666666666667rem;
  margin: 0.24rem 0;
  box-sizing: border-box;
  width: 100%;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .needAutoParam-type-view
  .shopping-header {
  display: flex;
  align-items: center;
  height: 0.96rem;
  padding: 0 0.08rem;
  box-sizing: border-box;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .needAutoParam-type-view
  .needAutoParam-shopping-name {
  font-size: 0.4rem;
  color: #4c4c4c;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .needAutoParam-type-view
  .dosage-hint {
  display: flex;
  height: 0.72rem;
  background: rgba(0, 0, 0, 0.68);
  border-radius: 0.08rem;
  padding: 0 0.32rem;
  align-items: center;
  margin-left: 0.16rem;
  box-sizing: border-box;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .needAutoParam-type-view
  .dosage-hint
  .dosage-hint-text-box {
  margin: 0 0.32rem 0 0.16rem;
  font-size: 0.32rem;
  color: #fff;
  height: 0.72rem;
  line-height: 0.72rem;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .needAutoParam-type-view
  .dosage-hint
  .dosage-hint-sigh {
  font-size: 0.4rem;
  font-weight: 600;
  color: #ff0;
  letter-spacing: -0.16rem;
  vertical-align: top;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .needAutoParam-type-view
  .dosage-hint
  .hint-icon {
  width: 0.4rem;
  height: 0.4rem;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .needAutoParam-type-view
  .dosage-hint
  .close-icon {
  width: 0.24rem;
  height: 0.24rem;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .needAutoParam-type-view
  .tbody-list-second {
  display: flex;
  border-top: 0.013333333333333334rem solid #f2f2f2;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0 0.06666666666666667rem;
  background: rgba(255, 255, 255, 0.78);
  border: 0.013333333333333334rem solid #70a0ff;
  border-radius: 0.16rem;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .needAutoParam-type-view
  .tbody-list-second
  .dosageDesc {
  display: flex;
  align-items: center;
  height: 0.96rem;
  padding: 0 0.06666666666666667rem;
  box-sizing: border-box;
  font-size: 0.32rem;
  font-weight: 500;
  color: #f70609;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .needAutoParam-type-view
  .tbody-list-third {
  width: 100%;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .needAutoParam-type-view
  .hasAdaptationShop {
  display: flex;
  align-items: flex-start;
  background: #fff;
  border-radius: 0.13333333333333333rem;
  width: 100%;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .needAutoParam-type-view
  .noAdaptationShop {
  width: 100%;
  padding: 0.2rem 0;
  font-size: 0.4rem;
  color: #d55f5a;
  background-color: #fff;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .needAutoParam-type-view
  .tbody-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding-top: 0.18666666666666668rem;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .needAutoParam-type-view
  .one {
  flex: 1;
  align-items: flex-start;
  box-sizing: border-box;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .needAutoParam-type-view
  .one
  .shopping-info {
  line-height: 0.64rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .needAutoParam-type-view
  .one
  .shopping-info
  .brandName {
  color: #5b5b5b;
  font-size: 0.36rem;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .needAutoParam-type-view
  .one
  .shopping-info
  .partItemName {
  margin-left: 0.16rem;
  font-size: 0.36rem;
  color: #377de8;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .needAutoParam-type-view
  .one
  .shopping-info
  .seriesName {
  font-size: 0.28rem;
  line-height: 0.4rem;
  background: #fab220;
  margin-left: 0.16rem;
  padding: 0.02666666666666667rem 0.13333333333333333rem;
  border-radius: 0.16rem 0.04rem;
  color: #fff;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .needAutoParam-type-view
  .one
  .shoppingTradeName {
  font-size: 0.32rem;
  color: #ff9000;
  line-height: 0.56rem;
  margin-top: 0.05333333333333334rem;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .needAutoParam-type-view
  .two {
  width: 1.4666666666666666rem;
  height: 0.64rem;
  align-items: center;
  color: #e74c3c;
  font-size: 0.4rem;
  box-sizing: content-box;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .needAutoParam-type-view
  .three {
  width: 2.4rem;
  align-items: flex-end;
  padding-left: 0.26666666666666666rem;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .needAutoParam-type-view
  .three
  .operate {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .needAutoParam-type-view
  .three
  .operate
  .operate-num {
  flex: 1;
  word-break: break-all;
  text-align: center;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .needAutoParam-type-view
  .three
  img {
  min-width: 0.64rem;
  max-width: 0.64rem;
  max-height: 0.64rem;
  min-height: 0.64rem;
  width: 0.64rem;
  height: 0.64rem;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .needAutoParam-type-view
  .three
  .stock-info {
  font-size: 0.32rem;
  color: #8e8e8e;
  line-height: 0.56rem;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .needAutoParam-type-view
  .three
  .stock-info
  .num {
  font-size: 0.4rem;
  font-weight: 550;
  color: #f34827;
  line-height: 0.56rem;
}
.manufacturer-shopping-wrapper .manufacturer-shopping-footer {
  width: 100vw;
  height: 1.6rem;
  position: fixed;
  left: 0;
  bottom: 0;
  background: #fff;
  display: flex;
  align-items: center;
  border-top: 0.013333333333333334rem solid #cbd4e1;
  box-sizing: border-box;
}
.manufacturer-shopping-wrapper .manufacturer-shopping-footer .cart-info {
  padding: 0.16rem 0.4rem;
}
.manufacturer-shopping-wrapper .manufacturer-shopping-footer .cart-info .price {
  height: 0.72rem;
  font-size: 0.32rem;
  color: #5b5b5b;
  display: flex;
  align-items: center;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-footer
  .cart-info
  .price
  .fuhao {
  font-size: 0.32rem;
  color: #e74c3c;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-footer
  .cart-info
  .price
  .jine {
  font-size: 0.48rem;
  color: #e74c3c;
  font-weight: 600;
}
.manufacturer-shopping-wrapper
  .manufacturer-shopping-footer
  .cart-info
  .shopNum {
  height: 0.56rem;
  font-size: 0.28rem;
  color: #8e8e8e;
  display: flex;
  align-items: center;
}
.manufacturer-shopping-wrapper .manufacturer-shopping-footer .cart-addBtn {
  width: 2.4rem;
  background: #ffe1e5;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.48rem;
  margin-left: auto;
  color: #e74c3c;
}
.manufacturer-shopping-wrapper .manufacturer-shopping-footer .pay-addBtn2 {
  width: 3.12rem;
  height: 100%;
  background: #e74c3c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.48rem;
  color: #fff;
}
.manufacturer-shopping-wrapper .manufacturer-shopping-footer .pay-addBtn1 {
  width: 2.4rem;
  height: 100%;
  background: #e74c3c;
  display: flex;
  align-items: center;
  font-size: 0.48rem;
  color: #fff;
  justify-content: space-between;
  flex-direction: column;
}

.manufacturer-shopping-wrapper
  .manufacturer-shopping-footer
  .pay-addBtn1::before,
.manufacturer-shopping-wrapper
  .manufacturer-shopping-footer
  .pay-addBtn1::after {
  content: "";
  display: block;
}
.discountPrice {
  height: .44rem;
  font-size: .28rem;
  color: #ffffff;
  line-height: .38rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.discountPrice .label {
  white-space: nowrap;
  margin-right: .05rem;
}

.deliveryInstructions-main {
  padding: 0.32rem 0.4rem;
  background: #fff;
}
.deliveryInstructions-main .label {
  height: 0.56rem;
  font-size: 0.36rem;
  font-weight: 600;
  color: #f84624;
  line-height: 0.56rem;
}
.deliveryInstructions-main .content {
  margin-top: 0.08rem;
  background-color: #fff;
  overflow: hidden;
}
.deliveryInstructions-main .content .item {
  font-size: 0.32rem;
  color: #8e8e8e;
  line-height: 0.56rem;
  word-break: break-all;
}
.deliveryInstructions-main .first {
  margin-bottom: 0.24rem;
  display: flex;
  background: #fff;
  overflow: hidden;
}
.deliveryInstructions-main .second {
  margin-bottom: 0.24rem;
  display: flex;
}
.deliveryInstructions-main .left-box {
  flex: 1;
}
.deliveryInstructions-main .right_btn {
  margin-top: 0.64rem;
  width: 0.7466666666666667rem;
  height: 0.56rem;
  font-size: 0.32rem;
  color: #377de8;
  line-height: 0.56rem;
  margin-left: auto;
}
</style>

<style lang="stylus" scoped>
.manufacturer-shopping
  height 100vh
  background-color #ecedee
.qrCode-main
  width 100%
  position relative
  .qrCodeImage
    width 100%
  .invalid-view
    width 100%
    height 100%
    position absolute
    left 0
    top 0
    background-color rgba(0, 0, 0, 0.68)
    z-index 3
    display flex
    justify-content center
    align-items center
    .text
      color #fff
      font-weight 500
      font-size 0.54rem
.apply-view
  display flex
  justify-content center
  margin-top 3.16rem
  flex-direction column
  align-items center
  .noFriendApproved-image
    width 1.49rem
    height 1.36rem
  .noFriendApproved-text
    font-size 0.4remm
    color rgb(255, 128, 13)
    margin-top 0.42rem
.noFriendApproved-view
  display flex
  justify-content center
  margin-top 3.16rem
  flex-direction column
  align-items center
  .noFriendApproved-image
    width 1.49rem
    height 1.36rem
  .noFriendApproved-text
    font-size 0.4remm
    color rgb(255, 128, 13)
    margin-top 0.42rem
  .seePriceBtn
    background #e74c3c
    border 1px solid #e74c3c
    border-radius 1.33rem
    font-size 0.4rem
    font-weight 600
    color #ffffff
    height 1.12rem
    display flex
    align-items center
    justify-content center
    margin 0.32rem 0 0.32rem
    width 4rem
    height 1.04rem
</style>